<template>
	<view>
		<view class="top xbgf xflex-x">
			<view class=" type " :class="info.active == index ?'active':'' " @click="onActive(index)" v-for="(item,index) in info.list" :key="index">
				{{item.name}}
			</view>
			
		</view>

		<view class="order xbgf xmb20">
			<view class="xflex-x-between">
				<view class="xflex-x">
					<view class="order-title xmr40">
						只接收这类订单
					</view>
					<view class="order-money xflex-x-between" @click="info.show = true">
						<view class="order-num">
							大于{{info.price.money}}元
						</view>
						<image class="order-gd" src="/pagesA/static/images/xia.png" mode=""></image>
					</view>
				</view>
				<view class="">
					<u-switch v-model="info.price_status" :activeValue="1" :inactiveValue="0"  size="28"></u-switch>
				</view>
			</view>

		</view>

		<view class="order xbgf xmb20">
			<view class="xflex-x-between">
				<view class="xflex-x">
					<view class="order-title xmr40">
						当日特价房
					</view>

				</view>
				<view class="">
					<u-switch v-model="info.discount" :activeValue="1" :inactiveValue="0" size="28"></u-switch>
				</view>
			</view>

		</view>
		
		<view class="xbottom">
			<view class="save" @click="save">
				保存设置
			</view>
		</view>
		
		<u-picker :show="info.show" keyName="money" :columns="info.pricelist" @cancel="info.show = false" @confirm="onprice"></u-picker>
	</view>
</template>

<script setup>
	import {
		houseCondition,
		hotelhouseCondition,
		hotelprice,
		hoteltypeList,
		houseConditionSave,
		typeConditionSave
	} from "../../../network/home.js"
	import {
		reactive,
		ref,
		computed
	} from 'vue';
	
	import {
		onReachBottom,
		onShow,
		onLoad
	} from '@dcloudio/uni-app';

	let info = reactive({
		id:'',
		pricelist:[],
		active:0,
		price:{
			id:'',
			money:0
		},
		price_status:0,
		discount:0,
		show:false,
		list:[]
	})
	onLoad((option)=>{
		// info.id = option.id
		gethotelhouseCondition()
	})
	
	
	const gethotelhouseCondition = () =>{
		hoteltypeList().then(res=>{
			// info.pricelist = res.data
			info.price_status = res.data[info.active].price_status
			info.discount = res.data[info.active].discount
			info.price.id = res.data[info.active].price_id
			info.id = res.data[info.active].type_id
			info.price.id = res.data[info.active].price_id
			info.list = res.data
			gethotelprice()
			
		})
	}
	
	const gethotelhouseConditions = () =>{
		hoteltypeList().then(res=>{
			// info.pricelist = res.data
			info.price_status = res.data[info.active].price_status
			info.discount = res.data[info.active].discount
			info.price.id = res.data[info.active].price_id
			info.id = res.data[info.active].type_id
			info.price.id = res.data[info.active].price_id
			gethotelprice()
			
		})
	}
	
	const save = () =>{
		typeConditionSave({
			type_id:info.id,
			price_id:info.price.id,
			price_status:info.price_status,
			discount:info.discount
		}).then(res=>{
			uni.showToast({
				title:'设置成功',
				icon:"none"
			})
		})
	}
	
	
	const onActive = (index) =>{
		// info.price_status = info.list[index].price_status
		// info.discount = info.list[index].discount
		// info.price.id = info.list[index].price_id
		// info.id = info.list[index].type_id
		// info.price.id = info.list[index].price_id
		// info.price = info.pricelist[index]
		
		info.active = index
		gethotelhouseConditions()
		
		// gethotelprice()
	}
	
	
	const gethotelprice = ()=>{
		hotelprice().then(res=>{
			console.log(res,info.price.id);
			info.pricelist = [res.data]
			if(info.price.id){
				
				res.data.forEach((item,index)=>{
					if(item.id == info.price.id){
						
						info.price = res.data[index]
					}
				})
				
			
				
			}else{
				info.price = res.data[0]
			}
			
		})
	}
	
	const onprice = (e) =>{
		console.log(e);
		info.price = e.value[0]
		info.show = false
	}
	
	
	const gethouseCondition = () => {
		houseCondition().then(res=>{
			console.log(res);
			
			
			
		})
	}
	
	// gethouseCondition()
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.top {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}
	.save{
		width: 620rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
		border-radius: 44rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		margin: auto;
	}
	.active {
		background: #0FB5FC !important;
		color: #fff !important;
	}

	.type {
		width: 162rpx;
		height: 50rpx;
		background: #F5F6FA;
		border-radius: 10rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
		text-align: center;
		line-height: 50rpx;
		margin-right: 20rpx;
	}

	.order {
		padding: 24rpx 30rpx;
		margin-top: 20rpx;

		&-title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #444444;
		}

		&-gd {
			width: 12rpx;
			height: 24rpx;
		}

		&-money {
			width: 295rpx;
			height: 72rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
			padding: 22rpx 30rpx;
			box-sizing: border-box;
		}
		
		&-num {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #0DBEFB;
		}
		
		&-gd {
			width: 24rpx;
			height: 24rpx;
		}
	}
</style>